
<style lang="less">
	page{
			background: #F5F5F5;
	}
	.container{
		padding: 30upx 30upx 0;
		box-sizing: border-box;
		margin-bottom: 50upx;
	}
	.head{
		display: flex;
		justify-content: space-between;
		.head_list{
			width: 47%;
			background: #FFFFFF;
			text-align: center;
			padding: 36upx 0;
			box-sizing: border-box;
			border-radius: 24upx;
			.head_list_txt{
				font-size: 30upx;
				font-weight: bold;
				color: #333333;
				line-height: 30upx;
			}
			.head_list_people{
				margin-top: 42upx;
				font-size: 26upx;
				font-weight: 500;
				color: #999999;
				line-height: 40upx;
				.yellow{
					margin-right: 10upx;
					font-size: 50upx;
					font-family: "DINCond";
					font-weight: 400;
					color: #DBC291;
					line-height: 40upx;
				}
			}
		}
	}
	.main{
		margin: 26upx 0;
		width: 100%;
		padding: 40upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 24rpx;
		.main_title{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 30rpx;
			margin-bottom: 32upx;
		}
		.charts-box-ring {
		  width: 100%;
		  height: 600upx;
		}
	}
	.foot{
		width: 100%;
		padding: 40upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 24rpx;
		.foot_title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30upx;
			.foot_title_txt{
				font-size: 30upx;
				font-weight: bold;
				color: #333333;
				line-height: 30upx;
			}
			.foot_title_img{
				width: 32upx;
				height: 26upx;
			}
		}
		.charts-box {
		  width: 100%;
		  height: 600upx;
		}
	}
</style>


<template>

	<view class="container">
		<view class="head">
			<view class="head_list">
				<view class="head_list_txt">团队规模</view>
				<view class="head_list_people"><text class="yellow">{{ringList.team}}</text>人</view>
			</view>
			<view class="head_list">
				<view class="head_list_txt">直属粉丝数</view>
				<view class="head_list_people"><text class="yellow">{{ringList.fans}}</text>人</view>
			</view>
		</view>
		<view class="main">
			<view class="main_title">各等级用户占比</view>
			<view class="charts-box-ring">
			  <!-- <qiun-data-charts type="ring" :chartData="ringArr" :opts="{title:{name:teamSum1 + '元'}}" :tapLegend="false" @getIndex="getIndex"/> -->
			<qiun-data-charts type="ring" :chartData="ringArr" :tapLegend="false" @getIndex="getIndex"/>
			</view>
		</view>
		<view class="foot" v-if="areaIndex == 5">
			<view class="foot_title">
				<view class="foot_title_txt">近7日粉丝变动趋势</view>
				<image src="https://static.xpandago.net/wechat/images/fanzhuan@2x.png" mode="widthFix" class="foot_title_img" @tap="changeArea(0)"></image>
			</view>
			<view class="charts-box">
			  <qiun-data-charts type="area" :chartData="areaA"/>
			</view>
		</view>
		<view class="foot" v-else-if="areaIndex == 0">
			<view class="foot_title">
				<view class="foot_title_txt">近7日注册会员新增趋势</view>
				<image src="https://static.xpandago.net/wechat/images/fanzhuan@2x.png" mode="widthFix" class="foot_title_img" @tap="changeArea(1)"></image>
			</view>
			<view class="charts-box">
			  <qiun-data-charts type="area" :chartData="areaB"/>
			</view>
		</view>
		<view class="foot" v-else-if="areaIndex == 1">
			<view class="foot_title">
				<view class="foot_title_txt">近7日VIP新增趋势</view>
				<image src="https://static.xpandago.net/wechat/images/fanzhuan@2x.png" mode="widthFix" class="foot_title_img" @tap="changeArea(2)"></image>
			</view>
			<view class="charts-box">
			  <qiun-data-charts type="area" :chartData="areaC"/>
			</view>
		</view>
		<view class="foot" v-else-if="areaIndex == 2">
			<view class="foot_title">
				<view class="foot_title_txt">近7日银尊VIP新增趋势</view>
				<image src="https://static.xpandago.net/wechat/images/fanzhuan@2x.png" mode="widthFix" class="foot_title_img" @tap="changeArea(3)"></image>
			</view>
			<view class="charts-box">
			  <qiun-data-charts type="area" :chartData="areaD"/>
			</view>
		</view>
		<view class="foot" v-else-if="areaIndex == 3">
			<view class="foot_title">
				<view class="foot_title_txt">近7日金尊VIP新增趋势</view>
				<image src="https://static.xpandago.net/wechat/images/fanzhuan@2x.png" mode="widthFix" class="foot_title_img" @tap="changeArea(4)"></image>
			</view>
			<view class="charts-box">
			  <qiun-data-charts type="area" :chartData="areaE"/>
			</view>
		</view>
		<view class="foot" v-else-if="areaIndex == 4">
			<view class="foot_title">
				<view class="foot_title_txt">近7日至尊VIP新增趋势</view>
				<image src="https://static.xpandago.net/wechat/images/fanzhuan@2x.png" mode="widthFix" class="foot_title_img" @tap="changeArea(5)"></image>
			</view>
			<view class="charts-box">
			  <qiun-data-charts type="area" :chartData="areaF"/>
			</view>
		</view>
	</view>

</template>

<script>
	import api from '@/common/api';
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js';
  export default {

    components: {},

    data () {

      return {
		  token:'',
		  // token:'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiLmtYvor5XpnLgiLCJhdWRpZW5jZSI6IjhmM2JhNWZkMmJlYWM0Njc3NGNlYmE3Nzk4YjRlMmM0IiwidXNlcl9pZCI6NzA0NjQsImNyZWF0ZWQiOjE2MjIxNjg5ODE5NDAsImV4cCI6MTYyNDc2MDk4MSwidXNlcl9ncm91cF9pZCI6Mjg2NjN9.NCgte1bZrTHr7KHixPfJInXPhiUyQVrVmHpK7SrzFwnYgVlsRlfxjyn6pCWGmaGFeR2UkvJsZvQBHmnDEhTpNA',
		  // teamSum1: '',  //当月团队业绩 元
		  ringList:{},  //标题数据
		  ringArr:{}, //扇形图数据
		  areaA:{}, //粉丝
		  areaB:{}, //注册会员
		  areaC:{}, //VIP
		  areaD:{}, //银尊VIP
		  areaE:{}, //金尊VIP
		  areaF:{}, //至尊VIP
		  areaIndex: 5,
	  }
    },
	onLoad(){
		this.token=uni.getStorageSync('token')
		this.teamTrend()
	},
    methods: {
		getIndex(e){
			// console.log(e)
			if(e.currentIndex < 0){
				return
			}
			this.areaIndex = e.currentIndex
		},
			
		changeArea(index){
			this.areaIndex = index
		},
		async teamNum(){
			const [err, res] = await api.teamNum({
				header:{
					'token': this.token
				}
			 });
			 // console.log(res)
			 if(res.data.code == 0){
				this.ringList = res.data.data
				let level = res.data.data.level
				let ringArr={series:[]};
				ringArr.series=[{
					 data: [{
						  name: "注册会员",
						  value: level[0],
					  },{
						  name: "VIP",
						  value: level[1],
					  },
					  {
						  name: "银尊VIP",
						  value: level[2],
					  },
					  {
						  name: "金尊VIP",
						  value: level[3],
					  },
					  {
						  name: "至尊VIP",
						  value: level[4],
					  }],
				}]
				ringArr.series.forEach(v => {
					v.format = "ringDemo"
				})
				this.ringArr = ringArr
			}
		},
		async teamTrend(){
			const [err, res] = await api.teamTrend({
				header:{
					'token': this.token
				}
			 });
			 // console.log(res)
			 if(res.data.code == 0){
				let	result = res.data.data
				// let areaA={categories:[],series:[]};
				// areaA.categories=result.days
				// areaA.series=[{
				// 	 name: '增加数',
				// 	 data: result.fans,
				// }]
				this.areaA = {categories:result.days,series:[{name: '增加数', data: result.fans}]}
				this.areaB = {categories:result.days,series:[{name: '增加数', data: result.tourist}]}
				this.areaC = {categories:result.days,series:[{name: '增加数', data: result.general}]}
				this.areaD = {categories:result.days,series:[{name: '增加数', data: result.small}]}
				this.areaE = {categories:result.days,series:[{name: '增加数', data: result.middle}]}
				this.areaF = {categories:result.days,series:[{name: '增加数', data: result.big}]}
				this.teamNum()
			}
		},
		// //业绩信息
		// async performance(){
		// 	const [err, res] = await api.performance({
		// 			header:{
		// 				'Content-Type': 'application/json',
		// 				'token': this.token
		// 			}
		// 		 });
		// 	 if(res.data.code == 0){
		// 		 this.teamSum1=res.data.data.teamSum1
		// 	 }
		// },
	},

  }
</script>